$che-stack-library-selecter-color = $label-info-color

.che-stack-library-selecter
  height 110px
  width 180px
  border-color $form-element-border-color
  background-color $background-color
  border-width 2px
  border-style solid
  che-border-radius(2px)
  -webkit-box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  box-shadow 0 1px 1px rgba(0, 0, 0, 0.05)
  margin-left 0
  cursor pointer
  margin-right 16px
  color $che-stack-library-selecter-color

  &:hover
    background-color #EEE


.che-stack-library-selecter md-card-content
  padding 0


.che-stack-library-selecter .title
  padding-left 10px
  padding-top 4px
  padding-bottom 3px
  font-size 14px
  text-transform uppercase
  color $label-primary-color


.che-stack-library-selecter .body
  margin-top 12px
  margin-bottom 8px

.che-stack-library-selecter md-icon
  font-size 60px
  text-align center
  margin-left auto
  margin-right auto
  margin-top 16px
  margin-bottom 0px
  padding 0px
  height 74px
  width 74px


.che-stack-library-selecter-active
  border-color $primary-color
  color $primary-color

  &:hover
    color $primary-color
    background-color #EEE

.che-stack-library-selecter-active:hover .title
  background-color $primary-color
  color $background-color


.che-stack-library-selecter-active .body
  background-color $primary-color

.che-stack-library-selecter-active .title
  background-color $primary-color
  color $background-color

.che-stack-library-selecter-active:hover .body
  background-color $primary-color !important
  color $background-color

.che-stack-library-selecter-active:hover md-icon
  color $primary-color

.che-stack-library-selecter-active md-icon
  color $primary-color

.che-stack-library-selecter:active .body
  display block

che-stack-library-selecter md-card:focus
  outline none

che-stack-library-selecter
  outline none

.che-stack-library-selecter-extra-text
  cursor pointer
  margin-right 7px
  margin-bottom 2px

.che-stack-library-selecter-text
  font-size 12px
  padding-left 10px
